<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>唯品快抢</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            /* list-style: none; */
            text-decoration: none;
            box-sizing: border-box;
        }
        /* 快捷导航模块 */
        
        .shortcut {
            background-color: #f5f5f5;
        }
        
        .w {
            margin: 0 auto;
            width: 1100px;
            height: 28px;
            line-height: 28px;
        }
        
        .fl {
            float: left;
            /* margin-left: 100px; */
        }
        
        .fl p {
            color: #333333;
        }
        
        p::after {
            content: "▾";
        }
        
        .fr {
            float: right;
            text-align: center;
        }
        
        .fr ul li a {
            color: #666;
        }
        
        ul li {
            display: inline-block;
        }
        
        .k {
            /* float: left; */
            width: 60px;
            height: 25px;
            text-align: center;
            background-color: green;
        }
        
        .fr>ul>li {
            margin-right: 6px;
        }
        
        a {
            color: #666;
            font-family: Georgia, 'Times New Roman', Times, serif;
            font-size: small;
            font-weight: 700;
        }
        
        .triangle::after {
            content: "▾";
        }
        /* 头部制作 */
        
        header {
            height: 100px;
            width: 1100px;
            margin: 0 auto;
            background-color: rgb(255, 255, 255);
            position: relative;
        }
        
        img {
            /* width: 100px; */
            height: 100px;
            /* position: absolute;
            top: 0px; */
        }
        
        .x {
            position: absolute;
            left: 220px;
        }
        
        .search {
            width: 360px;
            height: 34px;
            border: #fa2a83 2px solid;
            position: absolute;
            top: 30px;
            left: 631px;
        }
        
        button,
        input {
            /* input默认边款去掉 */
            border: 0;
            outline: none;
        }
        
        .search input {
            float: left;
            width: 300px;
            height: 29px;
            padding-left: 10px;
        }
        
        .search button {
            float: left;
            width: 56px;
            height: 32px;
            background-color: #fa2a83;
            font-size: 14px;
            color: rgb(255, 255, 255);
        }
        
        .hotwords {
            position: absolute;
            top: 65px;
            left: 650px;
        }
        
        .col {
            color: #fa2a83;
        }
        /* 购物车 */
        
        .shopcar {
            width: 100px;
            height: 32px;
            border: solid 1px rgb(173, 171, 171);
            background-color: #ebecec;
            position: absolute;
            top: 30px;
            left: 1000px;
            line-height: 32px;
            text-align: center;
        }
        
        .count {
            top: 30px;
            height: 5px;
            padding: 0 6px;
            border-radius: 6px;
            color: white;
            background-color: #fa2a83;
            font-style: normal;
            font-size: small;
        }
        /* nae制作 */
        
        .nav {
            height: 40px;
            /* border-bottom: 2px solid black; */
        }
        
        .triangle ul li {
            float: left;
            /* display: none; */
        }
        
        .dopdown {
            float: left;
            width: 150px;
            height: 43px;
            background-color: #fa2a83;
        }
        
        .navitems {
            float: left;
            width: 950px;
            height: 43px;
        }
        
        .dt {
            width: 100%;
            height: 100%;
            color: white;
            text-align: center;
            line-height: 40px;
            position: relative;
        }
        
        .xs {
            display: none;
        }
        
        .dt ul li {
            width: 100%;
            height: 50px;
            line-height: 31px;
            /* padding-left: 20px; */
            background-color: #fa2a83;
            line-height: 50px;
            text-align: center;
        }
        
        .dt ul li {
            display: none;
        }
        
        .dt:hover ul li {
            display: block;
        }
        
        ul li:hover {
            background-color: white;
        }
        
        .dt:hover ul {
            display: block;
            z-index: 100;
        }
        
        ul li a {
            font-size: 14px;
            color: rgb(255, 255, 255);
        }
        
        ul li:hover a {
            font-size: 14px;
            color: #fa2a83;
        }
        
        .navitems ul {
            position: absolute;
            margin-top: -20px;
        }
        
        .navitems ul li {
            margin-left: 15px;
        }
        
        .navitems ul li a {
            padding: 10px;
            font-size: 16px;
            color: rgb(56, 55, 55);
        }
        
        .navitems ul li:hover a {
            color: #fa2a83;
        }
        
        .more ul li {
            /* display: none; */
            text-align: center;
            width: 80px;
            height: 40px;
        }
        /* 主体部分 */
        
        .ee {
            margin: 0 auto;
            width: 1200px;
            height: 419px;
            background: url(./imges/k.jpg) no-repeat;
            background-size: 1200px 419px;
        }
        
        .ee span {
            /* display: inline-block; */
            width: 180px;
            height: 250px;
            margin-top: 100px;
            margin-left: 100px;
            background-color: rgb(250, 250, 250);
            border-radius: 20px;
            float: left;
        }
        
        .ee span img {
            width: 180px;
            height: 200px;
            border-radius: 20px;
        }
        
        .ee span p {
            width: 180px;
            color: white;
            text-align: center;
            background-color: #fa2a83;
        }
        
        i {
            font-style: normal;
            margin-left: 50px;
            color: #fa2a83;
        }
        /* footer部分 */
        
        .footer {
            margin: 0 auto;
            width: 1200px;
            height: 1000px;
            background-color: #f3f4f5;
            border-top: 1px #ffdfef solid;
        }
        
        .hh {
            margin: 0 auto;
            margin-top: 30px;
            margin-bottom: 60px;
            height: 41px;
            width: 159px;
            background-color: #ffdfef;
            border: 1px solid #feaee2;
            text-align: center;
            line-height: 41px;
            color: #fa2a83;
            font-size: 24px;
        }
        
        .hx {
            position: absolute;
            width: 160px;
            height: 2px;
            transform: translate(310px, 49px);
            /* margin-left: 10px px; */
            background-color: #feaee2;
        }
        
        .hy {
            position: absolute;
            width: 160px;
            height: 2px;
            transform: translate(630px, -80px);
            /* margin-left: 10px px; */
            background-color: #feaee2;
        }
        
        .footer span {
            /* overflow: hidden; */
            background-color: white;
            display: inline-block;
            width: 163px;
            height: 86px;
            border: #f3f4f5 1px solid;
            margin-top: 15px;
            margin-left: 30px;
        }
        
        .footer span:hover {
            /* transform: translateY(30%); */
            background-color: #fa2a83;
            transition: 0.5s;
        }
        
        .footer span img {
            float: right;
            width: 60px;
            height: 60px;
        }
        
        .footer span p {
            color: #4a4a4a;
            text-align: center;
            line-height: 86px;
            font-size: 15px;
            font-weight: 700;
        }
        
        .footer span p:hover {
            color: white;
        }
    </style>
</head>

<body>
     <script>
         var anser =
             prompt('请输入访问密码：');
         if (anser == '1234') {
             alert('欢迎小主登录！！')
         } else {
             // 关闭网页
             alert('不好意思哦，密码输入有误，您不可以访问哦')
             window.close()
         }
     </script>
    <!-- 快捷导航 -->
    <section class="shortcut">
        <div class="w">
            <div class="fl">
                <p>长治市 </p>
            </div>
            <div class="fr">
                <ul>
                    <li><a href="#">请登录</a></li>
                    <li><a href="#">/</a></li>
                    <li><a href="#">注册</a></li>
                    <li>
                        <a href="#"></a>
                    </li>
                    <li><a href="#">/签到有礼</a></li>
                    <li><a href="#">/</a></li>
                    <li><a href="#">我的订单</a></li>
                    <li><a href="#">/</a></li>
                    <li><a href="#" class="triangle">我的特卖                     
                    </a>

                    </li>
                    <li><a href="#">/</a></li>
                    <li><a href="#" class="triangle ">会员俱乐部</a></li>
                    <li><a href="#">/</a></li>
                    <li><a href="#" class="triangle ">客户服务</a></li>
                    <li><a href="#">/</a></li>
                    <li><a href="#">手机版</a></li>
                    <li><a href="#">/</a></li>
                    <li><a href="#" class="triangle ">更多</a></li>
                </ul>
            </div>
        </div>
    </section>
    <!-- 头部模块 -->
    <header class="header ">
        <div class="logo">
            <img src="./imges/logo.png" alt="">
            <img src="./imges/lougou部分.jpg" alt="" class="x">
        </div>
        <div class="search"><input type="search" name="" id="" placeholder="国庆特卖 用券立省"> <button>搜索</button></div>
        <!-- 搜索框下下小模块制作 -->
        <div class="hotwords">
            <a href="#" class="col">精选大牌必推荐 </a>
            <a href="#"> | 安踏ANTA | </a>
            <a href="#">耐克Nike | </a>
            <a href="#">护肤套装 </a>
        </div>
        <!-- 搜索框下下小模块制作 -->
        <!-- 购物车模块 -->
        <div class="shopcar">购物袋 <span class="count">0</span>
            <!-- <i> 0 </i> -->
        </div>
        <!-- 购物车模块 -->
    </header>
    <!-- 头部模块 -->
    <!-- <nav标签制作 -->
    <nav class="nav">
        <div class="w">
            <div class="dopdown">
                <div class="dt">全部商品
                    <ul>
                        <li>
                            <a href="#">女装/男装/内衣</a>

                        </li>
                        <li>
                            <a href="#">女鞋/男鞋/箱包</a>
                        </li>
                        <li>
                            <a href="#">护肤彩妆/个护</a>
                        </li>
                        <li>
                            <a href="#">运动户外</a>
                        </li>
                        <li>
                            <a href="#">家电数码</a>
                        </li>
                        <li>
                            <a href="#">母婴童装</a>
                        </li>
                        <li>
                            <a href="#">手表配饰</a>
                        </li>
                        <li>
                            <a href="#">居家用品</a>
                        </li>
                        <li>
                            <a href="#">唯品生活</a>
                        </li>
                        <li>
                            <a href="#">医药健康</a>
                        </li>
                    </ul>
                </div>
            </div>

        </div>
        <div class="navitems">
            <ul>
                <li>
                    <a href="./主界面.html">
                        推荐</a>
                </li>
                <li><a href="#">三折疯抢</a></li>
                <li><a href="#">唯品快抢</a></li>
                <li><a href="#">唯品奥莱</a></li>
                <li><a href="#">女装</a></li>
                <li><a href="#">运动</a></li>
                <li><a href="#">鞋包</a></li>
                <li><a href="./美妆.html">美妆</a></li>
                <li><a href="#">母婴</a></li>
                <li><a href="#">电器</a></li>
                <li><a href="#">男装</a></li>
                <li><a href="#">首饰</a></li>
                <li class="xs"><a href="#">更多</a>
                    <div class="more">
                        <ul>
                            <li><a href="#">内衣</a></li>
                            <li><a href="#">百货</a></li>
                            <li><a href="#">食品</a></li>
                            <li><a href="#">家纺</a></li>
                        </ul>
                </li>
            </ul>

            </div>
        </div>
    </nav>
    <!-- 主体部分 -->
    <main>
        <div class="ee">
            <span><img src="./imges/图1.webp" alt=""><p>12枚装 一年使用量</p><i>券后价 108</i></span>
            <span><img src="./imges/图2.webp" alt=""><p>柔顺丝滑 强韧柔顺</p><i>券后价 108</i></span>
            <span><img src="./imges/图3.webp" alt=""><p>学生定制配方</p><i>券后价 108</i></span>
            <span><img src="./imges/图4.webp" alt=""><p>去屑控油</p><i>券后价 108</i></span>
        </div>
    </main>
    <footer class="footer">
        <i class="hx"></i>
        <div class="hh">热销分类</div><i class="hy"></i>
        <span><img src="./imges/01.webp" alt=""><p>面部护理</p><div class="rr" ></div></span>
        <span><img src="./imges/03.webp" alt=""><p>面部护理</p><div class="rr" ></div></span>
        <span><img src="./imges/02.webp" alt=""><p>面部护理</p><div class="rr" ></div></span>
        <span><img src="./imges/04.webp" alt=""><p>面部护理</p><div class="rr" ></div></span>
        <span><img src="./imges/05.webp" alt=""><p>面部护理</p><div class="rr" ></div></span>
        <span><img src="./imges/06.webp" alt=""><p>面部护理</p><div class="rr" ></div></span>
        <span><img src="./imges/07.webp" alt=""><p>面部护理</p><div class="rr" ></div></span>
        <span><img src="./imges/08.webp" alt=""><p>面部护理</p><div class="rr" ></div></span>
        <span><img src="./imges/09.webp" alt=""><p>面部护理</p><div class="rr" ></div></span>
        <span><img src="./imges/01.webp" alt=""><p>面部护理</p><div class="rr" ></div></span>
        <span><img src="./imges/03.webp" alt=""><p>面部护理</p><div class="rr" ></div></span>
        <span><img src="./imges/02.webp" alt=""><p>面部护理</p><div class="rr" ></div></span>
        <span><img src="./imges/04.webp" alt=""><p>面部护理</p><div class="rr" ></div></span>
        <span><img src="./imges/05.webp" alt=""><p>面部护理</p><div class="rr" ></div></span>
        <span><img src="./imges/06.webp" alt=""><p>面部护理</p><div class="rr" ></div></span>
        <span><img src="./imges/07.webp" alt=""><p>面部护理</p><div class="rr" ></div></span>
        <span><img src="./imges/08.webp" alt=""><p>面部护理</p><div class="rr" ></div></span>
        <span><img src="./imges/09.webp" alt=""><p>面部护理</p><div class="rr" ></div></span>

    </footer>
</body>

</html>